<template>
  <view class="flex flex-column">
    <!-- 头部 -->
    <yHeader
      :current="7"
      :screenWidth="screenWidth"
      @Tabs="handleTabs"
    ></yHeader>
    <!-- PC端 -->
    <view v-if="screenWidth > 480" class="py-4 bg-grey" style="height: 100%">
      <view class="__inner flex">
        <view class="mr-4 pb-4 flex flex-column w-100" style="height: 1030rpx">
          <!-- 标题 -->
          <view
            class="flex bg-white align-center border-bottom border-grey"
            style="box-sizing: border-box; height: 10%"
          >
            <text
              class="font-lg ml-4 font-weight-bold pl-2 border-left"
              :class="'border-' + ThemeColors"
              style="border-left-width: 8rpx"
              >其他服务</text
            >
          </view>
          <!-- 内容 -->
          <view class="flex align-center w-100 mt-2 neiR" style="height: 90%">
            <view
              @click="handleSkip('/pages/index/certificateservices')"
              class="bg-white hover p-2 flex flex-column justify-between w-100 border-right border-grey Other"
              style="
                box-shadow: 0 0 10rpx  rgba(0, 0, 0, 0.3);
                cursor: pointer;
                box-sizing: border-box;
                height: 90%;
                width: 22%;
                border-radius: 20rpx;
              "
            >
              <view
                class="flex-shrink flex justify-center w-100"
                style="height: 200rpx"
              >
                <image
                  style="width: 200rpx; height: 200rpx"
                  src="../../static/icon/4.png"
                  mode=""
                ></image>
              </view>
              <view class="" style="height: 50%">
                <view class="text-center">
                  <text class="font-lg font-weight-bold py-3 title"
                    >认证服务</text
                  >
                </view>
                <view style="text-indent: 1rem;">
                  <text class="font-sm"
                    >&nbsp;&nbsp;我们为您提供专业的认证服务，确保您的产品或服务符合相关的标准和法规要求。我们的认证流程严格合规，通过我们的认证，您可以证明您的产品或服务的质量和合法性，增强消费者对您的信任。</text
                  >
                </view>
              </view>
            </view>
            <view
              @click="handleSkip('/pages/index/Trademarkservices')"
              class="bg-white hover p-2 flex flex-column justify-between w-100 border-right border-grey Other"
              style="
                box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
                cursor: pointer;
                box-sizing: border-box;
                height: 90%;
                width: 22%;
                border-radius: 20rpx;
              "
            >
              <view
                class="flex-shrink flex justify-center w-100"
                style="height: 200rpx"
              >
                <image
                  class="rounded-circle"
                  style="width: 200rpx; height: 200rpx"
                  src="../../static/icon/order-financing.png"
                  mode=""
                ></image>
              </view>
              <view class="" style="height: 50%">
                <view class="text-center">
                  <text class="font-lg font-weight-bold py-3 title"
                    >商标设计</text
                  >
                </view>
                <view style="text-indent: 1rem;">
                  <text class="font-sm"
                    >我们的商标服务帮助您注册和保护您的商标，确保您在市场上建立起独特的品牌形象。我们的专业团队将协助您完成商标注册流程，保护您的商标不受侵权，并提供维权服务，确保您的品牌价值得到充分保护。</text
                  >
                </view>
              </view>
            </view>
            <view
              @click="handleSkip('/pages/index/Testingservices')"
              class="bg-white hover p-2 flex flex-column justify-between w-100 border-right border-grey Other"
              style="
                box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
                cursor: pointer;
                box-sizing: border-box;
                height: 90%;
                width: 22%;
                border-radius: 20rpx;
              "
            >
              <view
                class="flex-shrink flex justify-center w-100"
                style="height: 200rpx"
              >
                <image
                  class="rounded-circle"
                  style="width: 200rpx; height: 200rpx"
                  src="../../static/icon/3.png"
                  mode=""
                ></image>
              </view>
              <view class="" style="height: 50%">
                <view class="text-center">
                  <text class="font-lg font-weight-bold py-3 title"
                    >检测服务</text
                  >
                </view>
                <view style="text-indent: 1rem;">
                  <text class="font-sm"
                    >企业凭借其购销合同和有生产能力、能提供有效担保的订单，向银行提出贷款申请。银行则根据企业的订单及合同，向企业提供贷款。企业在收到货款后，会立即偿还贷款。</text
                  >
                </view>
              </view>
            </view>
            <view
              @click="handleSkip('/pages/index/Designservices')"
              class="bg-white hover p-2 flex flex-column justify-between w-100 border-right border-grey Other"
              style="
                box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
                cursor: pointer;
                box-sizing: border-box;
                height: 90%;
                width: 22%;
                border-radius: 20rpx;
              "
            >
              <view
                class="flex-shrink flex justify-center w-100"
                style="height: 200rpx"
              >
                <image
                  class="rounded-circle"
                  style="width: 200rpx; height: 200rpx"
                  src="../../static/icon/5.png"
                  mode=""
                ></image>
              </view>
              <view class="" style="height: 50%">
                <view class="text-center">
                  <text class="font-lg font-weight-bold py-3 title"
                    >网页设计</text
                  >
                </view>
                <view style="text-indent: 1rem;">
                  <text class="font-sm"
                    >我们提供创意设计服务，帮助您打造与众不同的品牌形象和用户体验。我们的设计团队拥有丰富的经验和创造力，能够为您提供优质的视觉设计、平面设计、UI/UX设计等服务，在竞争激烈的市场中脱颖而出。</text
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--  -->
    <view
      v-else-if="screenWidth <= 480"
      class="py-4 bg-grey"
      style="height: 100%"
    >
      <view class="mx-2 bg-white flex mb-4">
        <view class="pb-4 flex flex-column w-100">
          <!-- 标题 -->
          <view
            class="flex align-center border-bottom border-grey"
            style="box-sizing: border-box"
          >
            <text
              class="font-lg font-weight-bold pl-2 py-1 border-left"
              :class="'border-' + ThemeColors"
              style="border-left-width: 8rpx"
              >订单融资</text
            >
          </view>
          <!-- 内容 -->
          <view class="flex align-center w-100">
            <view
              @click="handleSkip('/pages/finance/order-financing')"
              class="flex flex-column w-100"
              style="cursor: pointer; box-sizing: border-box"
            >
              <view
                class="flex-shrink flex justify-center w-100 my-2"
                style="height: 200rpx"
              >
                <image
                  class="rounded-circle"
                  style="width: 200rpx; height: 200rpx"
                  src="../../static/icon/order-financing.png"
                  mode=""
                ></image>
              </view>
              <view class="w-100 flex flex-column align-center">
                <view class="">
                  <text class="font font-weight-bold">介绍说明</text>
                </view>
                <view style="width: 95%">
                  <text class="font-sm"
                    >企业凭借其购销合同和有生产能力、能提供有效担保的订单，向银行提出贷款申请。银行则根据企业的订单及合同，向企业提供贷款。企业在收到货款后，会立即偿还贷款。</text
                  >
                </view>
              </view>
              <view class="mt-2 w-100 flex flex-column align-center">
                <view
                  class="flex align-center"
                  style="height: 20%; box-sizing: border-box"
                >
                  <text class="font font-weight-bold">最新消息</text>
                </view>
                <view style="width: 95%">
                  <view
                    v-for="i in 5"
                    :key="i"
                    class="flex align-center w-100"
                    style="height: 50rpx"
                  >
                    <view
                      class="line flex-shrink"
                      :class="'bg-' + ThemeColors"
                    ></view>
                    <text class="font-sm text-ellipsis" style="width: 720rpx"
                      >西货郎企业与20分钟前办理仓单质押服务</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="mx-2 bg-white flex mb-4">
        <view class="pb-4 flex flex-column w-100">
          <!-- 标题 -->
          <view
            class="flex align-center border-bottom border-grey"
            style="box-sizing: border-box"
          >
            <text
              class="font-lg font-weight-bold pl-2 py-1 border-left"
              :class="'border-' + ThemeColors"
              style="border-left-width: 8rpx"
              >仓单质押</text
            >
          </view>
          <!-- 内容 -->
          <view class="flex align-center w-100">
            <view
              @click="handleSkip('/pages/finance/order-financing')"
              class="flex flex-column w-100"
              style="cursor: pointer; box-sizing: border-box"
            >
              <view
                class="flex-shrink flex justify-center w-100 my-2"
                style="height: 200rpx"
              >
                <image
                  class="rounded-circle"
                  style="width: 200rpx; height: 200rpx"
                  src="../../static/icon/warehouse-pledge.png"
                  mode=""
                ></image>
              </view>
              <view class="w-100 flex flex-column align-center">
                <view class="">
                  <text class="font font-weight-bold">介绍说明</text>
                </view>
                <view style="width: 95%">
                  <text class="font-sm"
                    >作为一种新型的服务项目，在传统仓储企业向现代物流企业转型的过程中得到广泛应用。增值服务仓单质押在国外已经成为企业与银行融通资金的重要手段，也是仓储业增值服务的重要组成部分。</text
                  >
                </view>
              </view>
              <view class="mt-2 w-100 flex flex-column align-center">
                <view
                  class="flex align-center"
                  style="height: 20%; box-sizing: border-box"
                >
                  <text class="font font-weight-bold">最新消息</text>
                </view>
                <view style="width: 95%">
                  <view
                    v-for="i in 5"
                    :key="i"
                    class="flex align-center w-100"
                    style="height: 50rpx"
                  >
                    <view
                      class="line flex-shrink"
                      :class="'bg-' + ThemeColors"
                    ></view>
                    <text class="font-sm text-ellipsis" style="width: 720rpx"
                      >西货郎企业与20分钟前办理仓单质押服务</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="mx-2 bg-white flex">
        <view class="pb-4 flex flex-column w-100">
          <!-- 标题 -->
          <view
            class="flex align-center border-bottom border-grey"
            style="box-sizing: border-box"
          >
            <text
              class="font-lg font-weight-bold pl-2 py-1 border-left"
              :class="'border-' + ThemeColors"
              style="border-left-width: 8rpx"
              >保付代理</text
            >
          </view>
          <!-- 内容 -->
          <view class="flex align-center w-100">
            <view
              @click="handleSkip('/pages/finance/order-financing')"
              class="flex flex-column w-100"
              style="cursor: pointer; box-sizing: border-box"
            >
              <view
                class="flex-shrink flex justify-center w-100 my-2"
                style="height: 200rpx"
              >
                <image
                  class="rounded-circle"
                  style="width: 200rpx; height: 200rpx"
                  src="../../static/icon/factoring.png"
                  mode=""
                ></image>
              </view>
              <view class="w-100 flex flex-column align-center">
                <view class="">
                  <text class="font font-weight-bold">介绍说明</text>
                </view>
                <view style="width: 95%">
                  <text class="font-sm"
                    >这种方式涉及到一个企业（卖方）将其现在或未来的基于其与另一个企业（买方）订立的货物销售/服务合同所产生的应收账款转让给保理商。</text
                  >
                </view>
              </view>
              <view class="mt-2 w-100 flex flex-column align-center">
                <view
                  class="flex align-center"
                  style="height: 20%; box-sizing: border-box"
                >
                  <text class="font font-weight-bold">最新消息</text>
                </view>
                <view style="width: 95%">
                  <view
                    v-for="i in 5"
                    :key="i"
                    class="flex align-center w-100"
                    style="height: 50rpx"
                  >
                    <view
                      class="line flex-shrink"
                      :class="'bg-' + ThemeColors"
                    ></view>
                    <text class="font-sm text-ellipsis" style="width: 720rpx"
                      >西货郎企业与20分钟前办理仓单质押服务</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <yFooter Show :screenWidth="screenWidth"></yFooter>
  </view>
</template>

<script>
const app = getApp();
import yHeader from "@/components/yHeader.vue";
import yFooter from "@/components/yFooter.vue";
import { Message } from "element-ui"
import times from '@/static/js/utils.js'
export default {
  components: {
    yHeader,
    yFooter,
  },
  data() {
    return {
      screenWidth: uni.getSystemInfoSync().windowWidth,
      screenHigth: uni.getSystemInfoSync().windowHeight,
      ThemeColors: app.globalData.ThemeColors,
    };
  },
  methods: {
    goTobaselarge(url) {
      window.location.href = url;
    },
    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
    handleSkip(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.neiR {
  justify-content: space-between;
}
.title {
  display: inline-block;
}
.Other {
  justify-content: space-evenly;
}
.line {
  height: 8rpx;
  width: 8rpx;
  margin-right: 11px;
}
.gun {
  animation: myscroll 5s linear infinite;
}
@keyframes myscroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-250rpx);
  }
}
.hover:hover{
	transition: 0.5s;
	transform: translateY(-10rpx);
}
</style>
